<!DOCTYPE html>
<html lang="en">

<head>
    <script src="jquery.js"></script>
    <meta charset="UTF-8">
    <title>创新创业查答案</title>
    <style>
        .container {
            width: 500px;
            height: 50px;
            margin: 100px auto;
        }

        .parent {
            width: 100%;
            height: 42px;
            top: 4px;
            position: relative;
        }

        .parent>input:first-of-type {
            /*输入框高度设置为40px, border占据2px，总高度为42px*/
            width: 380px;
            height: 40px;
            border: 1px solid #ccc;
            font-size: 16px;
            outline: none;
        }

        .parent>input:first-of-type:focus {
            border: 1px solid #317ef3;
            padding-left: 10px;
        }

        .parent>input:last-of-type {
            /*button按钮border并不占据外围大小，设置高度42px*/
            width: 100px;
            height: 44px;
            position: absolute;
            background: #317ef3;
            border: 1px solid #317ef3;
            color: #fff;
            font-size: 16px;
            outline: none;
        }
    </style>

</head>

<body>
<a href="/uploadData.html" target="_blank">点击我跳转到新题添加页面</a>&emsp;&emsp;&emsp;&emsp;&emsp;
<a href="/batch.html" target="_blank">点我跳转到批量导题脚本使用介绍</a>&emsp;&emsp;&emsp;&emsp;&emsp;
<a href="/help.html" target="_blank">点我跳转到帮助文档</a>
<div class="container">
    <div action="" class="parent" >
        <input type="text" id="content" placeholder="在这里输入你要查询的题目">
        <input type="button" value="搜" id="btn">
    </div>
</div>

<ol class="list"></ol>

<script >

document.querySelector("#btn").onclick = function() {

var content = document.querySelector("#content").value


$.ajax({
        type: "get",
        url: "/message1?question=" + content,
        success: function (res) {
            var qa = document.createElement("li");
            document.querySelector(".list").append(qa);
        qa.innerHTML = "<span style='color:royalblue'>" + "题目："+ res.question
            + "</span><span style='color:chocolate'>"
            + "&emsp;&emsp;&emsp;答案：" + res.answer + "</span>"
            document.querySelector("#content").value = ""
        }
    })

}


document.querySelector("#content").addEventListener("keyup", function(event){

    if (event.keyCode === 13) {
        var content = document.querySelector("#content").value

$.ajax({
        type: "get",
        url: "/message1?question=" + content,
        success: function (res) {
            var qa = document.createElement("li");
            document.querySelector(".list").append(qa);
        qa.innerHTML = "<span style='color:royalblue'>" + "题目："+ res.question
            + "</span><span style='color:chocolate'>"
            + "&emsp;&emsp;&emsp;答案：" + res.answer + "</span>"
            document.querySelector("#content").value = ""
        }
    })


    }

})



</script>

</body>


</html>